<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>财务首页</title>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui/css/layui.css">
<style type="text/css">  
.layui-table-page {  
position:fixed;  
}  
</style>
</head>
<body>
    <div class="container-fluid">
		<div class="row-fluid">
		<form class="layui-form">
			<div class="layui-row">
				<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
					<label class="layui-form-label">所属区域:</label>
					<div class="layui-input-block">
						<select id="areaId" name="areaId">
							<option value="0" selected="selected"></option>
							<c:forEach items="${areaDicDatasArr}" var="areaDicData">
					        	<option value="${areaDicData.dicDataValue}">${areaDicData.dicDataName}</option>
					        </c:forEach>
						</select>
					</div>
			    </div>
			    <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
    				<label class="layui-form-label">生成时间:</label>
    				<div class="layui-input-block">
				      <input type="text" id="startDate" name="startDate" placeholder="开始日期" autocomplete="off" class="layui-input">
				    </div>
    				<div class="layui-input-block">
						<input type="text" id="endDate" name="endDate" placeholder="结束日期" autocomplete="off" class="layui-input">
					</div>
				</div>
			    <div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
					<label class="layui-form-label">发票类型:</label>
					<div class="layui-input-block">
				      <select id="invoiceType" name="invoiceType">
				        <option value="" selected="selected"></option>
				        <c:forEach items="${typeDicDatasArr}" var="typeDicData">
				        	<option value="${typeDicData.dicDataValue}">${typeDicData.dicDataName}</option>
				        </c:forEach>
				      </select>
				    </div>
			    </div>
				<div class="layui-col-xs1 layui-col-sm1 layui-col-md1">
				&nbsp;
				</div>
				<div class="layui-col-xs3 layui-col-sm3 layui-col-md3">
    				<button id="query_btn"  type="button" class="layui-btn layui-btn-normal">查询</button>
    				<button type="reset" class="layui-btn layui-btn-warm">重置</button>
				</div>
    		</div>
    		</form>
			<div class="span12">
				<table id="financeTable" lay-filter="financeTable"></table>
			</div>
		</div>
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/lib/layui/layui.all.js"></script>
<script>
var ctx = "${pageContext.request.contextPath}";
var typeDicDatas = eval('${typeDicDatas}');
var areaDicDatas = eval('${areaDicDatas}');


function fromateTime(TimeStr){
	if(TimeStr){
		var yyyy = TimeStr.substring(0,4);
		var month = TimeStr.substring(4,6);
		var day = TimeStr.substring(6,8);
		var hh = TimeStr.substring(8,10);
		var min = TimeStr.substring(10,12);
		var second = TimeStr.substring(12,14);
		return yyyy+"-"+month+"-"+day+" "+hh+":"+min+":"+second;
	}
	return "";
}
function getDicVal(value,list){
	for(var i=0;i<list.length;i++){
		if(list[i].dicDataValue==value){
			return list[i].dicDataName;
		}
	}
	return "";
}
$(function(){
	var laydate = layui.laydate;
	var laytable = layui.table;
	//执行一个laydate实例
	laydate.render({
		elem: '#startDate', //指定元素
		format: 'yyyyMMdd' //可任意组合

	});
	laydate.render({
		elem: '#endDate', //指定元素
		format: 'yyyyMMdd' //可任意组合
	});
	var tableIns = laytable.render({
	    elem: '#financeTable'
	    ,height:350
	    ,url: ctx+'/finance/findByMap' //数据接口
	    ,where: {
	    	areaId: $("#areaId").val(),
	    	invoiceType:"123456",
	    	startDate: $("#startDate").val(),
	    	endDate: $("#endDate").val(),
	    }//参数
	    ,page: true //开启分页
	    ,cols: [[ //表头
	      {field: 'areaId', title: '所属区域',templet: function(d){
	          return getDicVal(d.areaId,areaDicDatas);
	      }  }
	      ,{field: 'invoiceType', title: '发票类型',templet: function(d){
	          return getDicVal(d.invoiceType,typeDicDatas);
	      } } 
	      ,{field: 'invoiceNum', title: '发票数量'}
	      ,{field: 'addDate', title: '录入日期',templet: function(d){
	          return d.addDate;
	      } } 
	    ]]
	  });
	$("#query_btn").on("click",function(){
		tableIns.reload({
		  where: { //设定异步数据接口的额外参数，任意设
		  	areaId: $("#areaId").val(), 
		  	startDate: $("#startDate").val(),
	    	endDate: $("#endDate").val(),
	    	invoiceType:$("#invoiceType").val()
		  }
		  ,page: {
		    curr: 1 //重新从第 1 页开始
		  }
		});
	});
});

</script>
</html>